<script setup lang='ts'>
interface Props {
  si: number
  ci?: string
}
type TTabItem = {
  label: string,
  value: string,
  icon: string
  path: string
}

defineOptions({ name: 'AppSportsAllLeagueTabs' })
const props = defineProps<Props>()

const sportsStore = useSportsStore()
const { sidebarData, allSportsCount } = storeToRefs(sportsStore)

const stickyDomRef = ref()
const { width: stickyDomW } = useElementSize(stickyDomRef)
const isLayerOpen = ref(false)
const allEventRef = ref()
onClickOutside(allEventRef, closeLayer)
const currentTab = ref(props.ci ? props.ci : 'hot')
const tabLabelRefs = ref<HTMLDivElement[]>([])
const tabMouseInIndex = ref(-1)
const hoverTabTransformX = ref(0)

// 顶级体育里面的联赛
const tabList = computed(() => {
  const hotObj = {
    label: $t('hot'),
    value: 'hot',
    icon: '',
    pgid: '',
    path: getSportsRoutePath({ page: '/sport', si: `${props.si}` })
  }

  if (sidebarData.value && sidebarData.value.menu && sidebarData.value.menu.length > 0) {
    const dataFindBySi = sidebarData.value.menu[0].list.find((a) => a.si === props.si)
    if (dataFindBySi) {
      const arr = dataFindBySi.list.map((b) => {
        return {
          ...b,
          label: b.cn,
          value: b.ci,
          icon: b.cpic,
          path: getSportsRoutePath({
            page: '/sport',
            si: `${props.si}`,
            ci: b.ci,
            cn: b.cn,
            icon: b.cpic,
            pgid: b.pgid
          })
        }
      })
      return [hotObj, ...arr]
    }
    return [hotObj]
  }
  return [hotObj]
})
// 总数
const totalCount = computed(() => {
  if (allSportsCount.value && allSportsCount.value.list && allSportsCount.value.list.length > 0) {
    const dataFindBySi = allSportsCount.value.list.find((a) => a.si === props.si)
    if (dataFindBySi)
      return dataFindBySi.c
  }

  return 0
})

function toggleSelect() {
  isLayerOpen.value = !isLayerOpen.value
}
function closeLayer() {
  isLayerOpen.value = false
}
function tabClickHandler(item: TTabItem) {
  if (currentTab.value === item.value)
    return

  currentTab.value = item.value
  i18nNavigateTo(item.path)
}
function onMouseEnter(i: number) {
  tabMouseInIndex.value = i
  if (tabLabelRefs.value[i].clientWidth > 212) {
    hoverTabTransformX.value = tabLabelRefs.value[i].clientWidth - 212
  }
}

function onMouseLeave() {
  tabMouseInIndex.value = -1
  hoverTabTransformX.value = 0
}

watch(() => props.ci, (a) => {
  if (a)
    currentTab.value = a
  else
    currentTab.value = 'hot'
})

provide('closeLayer', closeLayer)
</script>

<template>
  <div ref="allEventRef" class="relative w-full">
    <svg viewBox="0 0 60 32" xmlns="http://www.w3.org/2000/svg" class="w-[60px] h-[32px] absolute pointer-events-none"
      style="left: -10px; z-index: 4;">
      <mask id="btSvgMask">
        <rect x="0" y="0" width="60" height="32" fill="white"></rect>
        <rect x="10" y="0" width="80" height="32" fill="var(--color-bg-black-2)" rx="18" ry="18"></rect>
      </mask>
      <rect x="0" y="0" width="60" height="32" fill="var(--color-bg-black-2)" mask="url(#btSvgMask)"></rect>
    </svg>
    <div class="h-[32px] w-full overflow-hidden relative">
      <div class="w-full overflow-x-auto overflow-y-hidden pb-[50px]">
        <div class="h-[32px] inline-block whitespace-nowrap align-top">
          <div>
            <!-- 第一行 -->
            <div class="w-max flex box-border whitespace-nowrap">
              <!-- 下拉 -->
              <div ref="stickyDomRef" class="flex z-[3] sticky" :style="`left:-${stickyDomW - 40}px;`">
                <div @click="toggleSelect" class="all-events">
                  <div class="flex-1 w-full overflow-hidden relative">
                    <div class="w-full inline-block whitespace-nowrap">{{ $t('spt_all_event') }}</div>
                  </div>
                  <div class="num" v-show="totalCount">{{ totalCount }}</div>
                  <BaseIcon name="uni-triangle" :class="isLayerOpen ? 'rotate-[-180deg]' : ''"
                    class="text-[16px] ml-[8px] duration-300 mr-[-4px]" style="--tg-base-icon-color:#fff;" />
                </div>
                <svg viewBox="0 0 60 32" xmlns="http://www.w3.org/2000/svg"
                  class="w-[60px] h-[32px] absolute pointer-events-none" style="right: -26px; z-index: 4;">
                  <mask id="btStickySvgMask">
                    <rect x="0" y="0" width="60" height="32" fill="white"></rect>
                    <rect x="-54.2" y="0" width="80" height="32" fill="black" rx="18" ry="18"></rect>
                    <rect x="34" y="0" width="80" height="32" fill="black" rx="18" ry="18"></rect>
                  </mask>
                  <rect x="0" y="0" width="60" height="32" fill="var(--color-bg-black-2)" mask="url(#btStickySvgMask)">
                  </rect>
                </svg>
              </div>
              <!-- 其他tabs -->
              <div class="tab" v-for="item, index in tabList" :class="{ active: currentTab === item.value }"
                :key="item.value" :style="item.value !== 'hot' ? 'padding-left:4px;' : ''"
                @click="tabClickHandler(item)" @mouseenter="onMouseEnter(index)" @mouseleave="onMouseLeave">
                <div v-if="item.icon" class="flex-none w-[24px] flex items-center h-[24px] mr-[4px]">
                  <AppImage is-network :url="item.icon">
                    <BaseIcon class="text-[20px]" name="uni-vector" />
                  </AppImage>
                </div>
                <div class="flex-1 w-full overflow-hidden relative">
                  <div ref="tabLabelRefs" class="inline-block opacity-0">{{ item.label }}</div>
                  <div :style="`transform: translateX(-${tabMouseInIndex === index ? hoverTabTransformX : 0}px);`"
                    style="transition: transform 2s;"
                    :class="[tabMouseInIndex === index ? '' : 'overflow-hidden text-ellipsis']"
                    class="w-full z-[1] whitespace-nowrap block  top-0 left-0 absolute">
                    {{ item.label }}</div>
                </div>
              </div>
            </div>
            <!-- 第二行 -->
            <div></div>
          </div>
        </div>
      </div>
      <div class="mask" />
    </div>
    <!-- 弹出层 -->
    <div v-show="isLayerOpen" style="top:calc(100% + 8px);" class="w-full z-[10] left-0 absolute max-w-full box-border">
      <AppSportsAllRegionList :si="si" />
    </div>
  </div>
</template>

<style lang='scss' scoped>
.tab {
  color: var(--color-text-white-0);
  cursor: pointer;
  height: 32px;
  display: flex;
  padding: 0px 12px;
  position: relative;
  font-size: 14px;
  background: var(--color-bg-black-3);
  box-sizing: border-box;
  align-items: center;
  font-weight: 600;
  line-height: 16px;
  user-select: none;
  margin-right: 8px;
  border-radius: 18px;
  overflow: hidden;
  max-width: 256px;

  &.active {
    color: rgb(0, 0, 0);
    background: rgb(36, 238, 137);
  }
}

.all-events {
  color: var(--color-text-white-0);
  cursor: pointer;
  height: 32px;
  display: flex;
  padding: 0px 12px;
  position: relative;
  font-size: 14px;
  background: var(--color-bg-black-3);
  box-sizing: border-box;
  transition: background 0.5s, opacity 0.5s, color 0.5s;
  align-items: center;
  font-weight: 600;
  line-height: 16px;
  user-select: none;
  margin-right: 8px;
  border-radius: 18px;

  .num {
    color: rgba(255, 255, 255, 0.7);
    padding: 2px 6px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.5s, color 0.5s;
    font-weight: 600;
    line-height: 16px;
    margin-left: 4px;
    border-radius: 12px;
    letter-spacing: 0.3px;
  }
}



.mask {
  inset: auto 0px auto auto;
  z-index: 3;
  position: absolute;
  background: linear-gradient(to left, rgb(35, 38, 38), rgba(35, 38, 38, 0));
  pointer-events: none;
  width: 40px;
  height: 100%;
  top: 0px;
}
</style>
